<template>
<div>
  <div class="whiteBg">
    <div class="friend_detail_hd">
      <img class="left" :src="friendItem.url" />
      <div>
        <div class="clearfix">
          <!--<span class="left">{{friendItem.name}}</span>-->
          <span class="left">{{friendItem.friendNote}}
            <i class="left name" v-show="!friendItem.friendNote">{{friendItem.name}}</i>
          </span>
          <svg v-if="friendItem.sex=='man'" class="icon left" aria-hidden="true">
	                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-nansheng-"></use>
	                    </svg>
          <svg v-if="friendItem.sex=='woman'" class="icon left" aria-hidden="true">
	                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-nvsheng-"></use>
	                    </svg>
          <span v-if="friendItem.sex=='secre' ||friendItem.sex==null" class="user_padding left">保密</span>
        </div>
        <p>芸券号：{{friendItem.id}}</p>
      </div>
    </div>
  </div>
  <div class="whiteBg friend_remarks mgt15" @click="writeNickName">
    <div class="nickName">
      <span>为好友设置备注<i class="icon iconfont icon-right"></i></span>
    </div>
  </div>
  <div class="whiteBg mgt15">
    <div class="friend_remarks">
      <span class="left">电子券</span>
      <span class="right">{{couponNum}}张</span>
    </div>
  </div>
  <div class="addFriendBtn" @click="share">分享</div>
</div>
</template>
<script>
import * as types from '../../vuex/types.js'
import getData from '../../service/getData.js'
import getData2 from '../../service/getData2.js'
import { Toast,Indicator,MessageBox,cell} from 'mint-ui';
import {
  mapState
} from 'vuex'
export default {
  data() {
    return {
      friendItem: {},
      couponNum:'',
      nickName:'',
    }
  },
    computed:{
        ...mapState({
            userInfo:state => state.user.userInfo,
        })
    },
  methods: {
    share: function() {
      this.$store.commit("shareCoupUser", {
        friendId: this.friendItem.id
      })
      this.$router.push({
        path: '/shareList'
      })
    },
      //为好友设置备注名
    writeNickName: function(){
        this.$router.push({
            name:'friendRemarks',
            query:{
                usrId: this.userInfo.usrId,
                friendId: this.friendItem.id
            }
        })
    }
  },
  beforeRouteLeave(to, from, next) {

    next()
  },
  created: function() {
    var that = this;

    // 券的数量
    getData.countCoupon({}, that.$route.query.friendId).then(rep => {
      // console.log(rep);
      // that.couponNum=rep;
      if (rep.respCode == '00') {
        that.couponNum = rep.content;
      } else {
        Toast({
          message: rep.errorInfo,
          duration: 1000
        });
      }
    })
      getData2.friendDetail({
          method:'post',data:{  "friendId": that.$route.query.friendId, "usrId":that.userInfo.usrId}//
      }).then(rep => {
          // console.log(rep);
          if (rep.respCode == '00') {
              that.friendItem = rep.content
          } else {
              Toast({
                  message: rep.errorInfo,
                  duration: 1000
              });
          }
      })
  }
}
</script>
<style>
  .nickName .icon-right{position:absolute;right:1rem}
  .clearfix .name{

  }
</style>
